<template>
	<view>
		<block v-if="noticeArr.length>0">
			<!-- 通告栏 -->
			<view style="padding:0 20rpx 20rpx 20rpx;background-color: #FFFFFF;">
				<view class="tui-rolling-news" style="background-color: #f8f4f5;border-radius: 20rpx;">
					<view class="tui-notice_1">
						<u-icon name="volume" size="30" color="#000000"></u-icon>
						<text style="padding: 0 15rpx 0 15rpx;font-weight: 700;">公告</text><text style="color: #cccccc;">|</text>
					</view>
					<swiper vertical autoplay circular interval="3000" class="tui-swiper">
						<swiper-item v-for="(item,index) in noticeArr" :key="index" class="tui-swiper-item">
							<view class="tui-news-item" @tap.stop='toDetail()' style="font-size: 24rpx;">{{item.title}}</view>
						</swiper-item>
					</swiper>
					<u-icon name="arrow-right" color="#cccccc" size="28"></u-icon>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'notice',
		props: {
			noticeList: {
				type: Array,
				value: []
			}
		},
		data() {
			return {
				noticeArr: [] // 公告的实时数据
			};
		},
		watch: {
			noticeList() {
				console.log('周福林')
				this.noticeArr = this.noticeList;
				// console.log(this.noticeList);
			}
		},
		methods: {
			change(e) {
				// console.log(e);
				this.gridCurrent = e.detail.current;
			},
			toDetail() {
				// console.log(2222)
				uni.navigateTo({
					url:'../../pages/Announcement/Announcement'
				})
				
			}
		}
	};
</script>

<style scoped lang="scss">
	.tui-swiper {
		font-size: 26rpx;
		height: 55rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-rolling-news {
		width: 100%;
		padding: 3rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}

	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
